<template>
  <div class="m-button" v-if="type">
    <button :class="type" :disabled="disabled" :open-type="openType" @click="onClick">{{text}}</button>
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    type: {
      type: String,
      default: 'primary',
    },
    disabled: {
      type: Boolean,
      default: false
    },
    openType: {
      type: String,
      default: ''
    }
  },
  methods: {
    onClick () {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="less" scoped>
.m-button {
  display: block;
  width: 100%;
  button {
    font-size: 32rpx;
    border-width: 2rpx;
    border-style: solid;
    border-radius: 0;
    &.primary {
      background: #575757;
      color: #fff;
      border-color: #575757;
      &:active {
        background: #343434;
        border-color: #343434;
      }
    }
    &.plain {
      background: #fff;
      color: #575757;
      border-color: #575757;
      &:active {
        background: #bfbfbf;
        border-color: #bfbfbf;
      }
    }
    &.red {
      background: #d15241;
      color: #fff;
      border-color: #d15241;
      &:active {
        background: #b04639;
        border-color: #b04639;
      }
    }
    &.gold {
      background: #dba912;
      color: #fff;
      border-color: #dba912;
      &:active {
        background: #b5971f;
        border-color: #b5971f;
      }
    }
    &[disabled] {
      background: #DCDBDB;
      color: #fff;
      border-color: #DCDBDB;
      &:active {
        background: #DCDBDB;
      }
    }
    &:after {
      display: none;
    }
  }
}
</style>
